import { LoginInfoService } from '../../.././services/login-info.service';
import { Router } from '@angular/router';
import { commService } from '../../../services/comm.service';
import { ActionSheetController } from '@ionic/angular';
import { UpphotoService } from '../../../services/upphoto.service';
import { HttpService } from '../../../services/http.service';
import { BaseUiService } from '../../../services/base-ui.service';
import {Component,OnInit,ChangeDetectorRef} from '@angular/core';
declare var AlloyCrop;
@Component({
  selector: 'app-mydata',
  templateUrl: './mydata.page.html',
  styleUrls: ['./mydata.page.scss'],
})
export class MydataPage implements OnInit {
  public userInfo:any
  public birthday:any
  public cropPicture = '';


  constructor(
    public BaseUiService: BaseUiService,
    public HttpService: HttpService,
    public commService: commService,
    public router: Router,
    public LoginInfoService:LoginInfoService,
    public upphotoService:UpphotoService,
    public actionSheetController: ActionSheetController,
    private cd: ChangeDetectorRef
  ) { }



  
  ngOnInit() {
    this.userInfo = this.LoginInfoService.getlocal('user')
  }

  goChangepwd(){
    this.router.navigate(['/mycenter/changepwd'])
  }
  goheadphoto(){
    this.presentActionSheet()
  }

  goShiming(){
    this.router.navigate(['/mycenter/verified'])
  }

  //底部弹出
  async presentActionSheet() {
    const actionSheet = await this.actionSheetController.create({
      header: '上传头像',
      buttons: [ {
        text: '拍照上传',
        icon: 'camera',
        handler: () => {
          // this.crop()
          this.commService.photo(400,40).subscribe(res=>{
            this.crop(res)
          })
        }
      }, {
        text: '相册上传',
        icon: 'image-outline',
        handler: () => {
          this.commService.picture(300,40).subscribe(res =>{
            this.crop(res)
          })
        }
      }, {
        text: '关闭',
        icon: 'close',
        role: 'cancel',
        handler: () => {
          console.log('关闭');
        }
      }]
    });
    await actionSheet.present();
  }

  //裁剪图片操作
  crop(urlInfo:any)
  {
    new AlloyCrop({
      image_src: urlInfo,
      className:'cropimg',
      circle: true,   //是否是圆形剪切，false为方形
      width: 320,     //选区的宽
      height: 320,    //选区的高
      output: 1,      //输出的倍率。比如如果output为2，选区的宽300，选区的高100，输出的图像的分辨率为 (2×300，2×100）
      ok: (base64, canvas) => {   //确定裁剪操作
        this.demo(base64)
      },
      cancel: () => {     //取消裁剪操作
      },
      ok_text: "确定",
      cancel_text: "取消"
    });
  }
  //上传图片的操作
  demo(info:any){
   
    this.upphotoService.UploadingHead(info).then( res1 =>{
      console.log(res1,'123132132')
      let p = {
        unitGuid:this.userInfo.unitGuid,
        headIcon:res1[0]['filePath']
      }
      console.log("**************上传图片的操作***********");
      console.log(p);
      this.HttpService.xgheadphoto(p).then(res =>{
        if(res['code']==200){
          this.userInfo.headIcon = this.HttpService.imgSrc() + res1[0]['filePath']
          setTimeout(() => {
            this.cd.detectChanges();
          },200)
          this.LoginInfoService.setlocal('user',this.userInfo)
        }else{
          this.BaseUiService.showToast(res['msg'],'customblue','top')
        }
      })
    }) 
  }
}
